<template>
	<div>
		<div class="p-1">
			<h3>HI {{current.user.account}}</h3>
			<p class="text-secondary">瑜加舞岛课房平台</p>
			<div>
				<Button @click="showSetting">系统设置</Button>
				<Button @click="initMj">初始化所有门禁</Button>
				<Button @click="initCache">初始化所有缓存</Button>
			</div>
		</div>

		<Row>
			<Col class="p-2" :xs="24" :sm="24" :md="12" :lg="6">
			<div ref="chart" class="shadow radius p-1" style="width: 100%; height: 400px;"></div>
			</Col>
			<Col class="p-2" :xs="24" :sm="24" :md="12" :lg="6">
			<div ref="kclx" class="shadow radius p-1" style="width: 100%; height: 400px;"></div>
			</Col>
		</Row>



		<!-- 热门课程盈利变化曲线 -->


		<!-- 热门门店盈利变化曲线 -->
		<div id="line-chart" style="width: 100%; height: 400px;"></div>

		<!-- 热门课程累计盈利图 -->
		<div ref="kcTotalPriceChart" style="width: 100%; height: 400px;"></div>

		<!-- 热门门店累计盈利图 -->
		<div ref="mdPrice" style="width: 100%; height: 400px;"></div>
	</div>
</template>

<script>
	import Vue from 'vue';
	import * as echarts from "echarts";
	export default {
		data: function() {
			return {
				grtjOption: {
					title: {
						text: '平台资金分布比例'
					},
					legend: {
						bottom: '5%',
						left: 'center'
					},
					tooltip: {},
					series: [{
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: true,
							position: 'center'
						},

						labelLine: {
							show: true
						},
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						type: 'pie',
						data: []
					}]
				},
				kclxOption: {
					title: {
						text: '每月前三课程类型'
					},
					tooltip: {
						trigger: 'axis',
						// formatter: function(params) {
						// 	let r = "";
						// 	for (let index in params) {
						// 		r += params[index].name + ":" + params[index].value + "<br/>";
						// 	}
						// 	return r;
						// }
					},
					xAxis: {
						type: 'category',
						data: []
					},
					yAxis: {
						type: 'value'
					},
					series: [{
							data: [],
							type: 'bar'
						},
						{
							data: [],
							type: 'bar'
						},
						{
							data: [],
							type: 'bar'
						}
					]
				}
			};
		},
		created: function() {
			this.getAmount();
			this.getKclx();
		},
		computed: {
			current: function() {
				return this.store.state.currentUser;
			}
		},
		methods: {
			showSetting: function() {
				this.$router.push({
					path: "/settings/homepage"
				})
			},
			getKclx: function() {
				this.http.get({
					url: '/count/kclx'
				}).then(res => {
					console.log(res);
					// this.$nextTick(() => {
					// 	console.log(this.kclxOption);
					// 	const myChart = echarts.init(this.$refs.kclx);
					// 	myChart.setOption(this.kclxOption);
					// });
					// return;
					for (let index in res.molist) {
						let mo = res.molist[index];

						for (let prop in mo) {
							let value = mo[prop];
							if ("ym" == prop) {
								this.kclxOption.xAxis.data.push(value);
							} else {
								console.log(123);
								this.kclxOption.series[parseInt(prop) - 1].data.push({
									name: value.lxname,
									value: value.total,
									label: {
										show: true,
										formatter: obj => {
											return obj.name;
										}
									}
								});
							}
						}
					}

					this.$nextTick(() => {
						console.log(this.kclxOption);
						const myChart = echarts.init(this.$refs.kclx);
						myChart.setOption(this.kclxOption);
					});
				});
			},
			getAmount: function() {
				this.http.get({
					url: '/count/amount'
				}).then(res => {

					var newData = [{
							value: res.bmAmount.total,
							name: '报课金额'
						},
						{
							value: res.yyAmount.total,
							name: '预约金额'
						},
						{
							value: res.hyAmount.total,
							name: '会员金额'
						},
						{
							value: res.clientAmount.clientTotalAmount,
							name: '用户余额'
						},
						{
							value: res.yjAmount.xyyj,
							name: '押金余额'
						}
					];
					this.grtjOption.series[0].data = newData;

					this.$nextTick(() => {
						const myChart = echarts.init(this.$refs.chart);
						myChart.setOption(this.grtjOption);
					});


				})
			},
			initMj: function() {
				this.http.get({
					url: "/qw/initdailytask"
				}).then(res => {
					this.message.info("初始化成功");
				});
			},
			initCache: function() {
				this.http.get({
					url: "/qw/initcache"
				}).then(res => {
					this.message.info("初始化成功");
				});
			},
		},
	}
</script>

<style scoped>

</style>